<template>
  <div>
    <div class="tree" v-for="item in treeDataes" :key="item.id">
        <div class="title" >
             <span :class="{openLable: true, icon:true, iconxiala:true, act: open.indexOf(item.id) != -1}" v-show="item.children" @click="openChile(item.id)"></span> 
             <!-- <el-checkbox @change="checkHandle(item.id)"></el-checkbox> -->
             <span :class="{select:true, checked:isChecked(item.id)}"  @click="checkHandle(item.id)"></span>
             <span @click="checkHandle(item.id)" >{{item.name}}</span>
        </div>
        <div class="childTree" v-if="item.children" v-show="open.indexOf(item.id) != -1">
            <OptionTree :treeDataes="item.children" :mareCheck="mareCheck" :checkList="checkList"></OptionTree>
        </div>
    </div>
  </div>
</template>
<script>
import Bus from '@/utils/Bus.js'
export default {
  name: 'OptionTree',
  props: ['treeDataes', 'mareCheck', 'checkList'],
  data(){
      return {
          open:[],
          checkValue: this.mareCheck ? [] : '',
          checked: ''
      }
  },
  methods:{
      openChile(opId){
          const num = this.open.indexOf(opId)
          if (num == -1) {
              this.open.push(opId)
          } else {
              this.open.splice(num, 1)
          }
      },
      isChecked: function(id){
          return  typeof this.checked != 'object' ? id == this.checked : this.checked.indexOf(id) != -1
      },
      checkHandle(id){
          if (this.mareCheck) {
            let value = [...this.checkValue]
            if (value.indexOf(id) == -1) {
                value.push(id)
            } else {
                value.splice(value.indexOf(id), 1)
            }
            this.checkValue = value
          } else {
              console.log(6666, id,  this.checkValue)
              this.checkValue = id
            //   this.checkValue = this.checkValue && this.checkValue == id ? '' : id
          }
        //   this.$emit('checkHandle', this.checkValue)
        Bus.$emit('checkHandle', this.checkValue); 
      }
  },
  watch:{
      checkList(val, oldVal){
          this.checked = val
      }
  }
};
</script>

<style lang="scss">
    .tree {
        line-height: 30px;
        margin-left: 10px;
        position: relative;
        .openLable{
            width: 15px;
            transform: rotate(90deg);
            font-size: 16px;
            overflow: hidden;
            height: 10px;
            line-height: 20px;
            text-align: center;
            position: absolute;
            left: -15px;
            align-self: center;
        }
        .act{
            transform-origin: center;
            transform: rotate(180deg);
        }
        .title{
            display: flex;
            cursor: pointer;
        }
        .childTree{
            margin-left: 20px;
        }
        .select{
            display:inline-block;
            position: relative;
            align-self: center;
            width: 15px;
            height: 15px;
            border: solid 1px #3345ff;
            border-radius: 3px;
            line-height: 15px;
            margin-right: 6px;
        }
        .select::before{
            position: absolute;
            content: '\221A';
            color: #fff;
            font-size: 12px;
            width: 13px;
            line-height: 13px;
            text-align: center;
            transform: rotate(7deg);
        }
        .checked{
            background: #3345ff;
            color: #fff;
        }
    }
</style>